<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #drag {
            width: 50px;
            height: 50px;
            background: yellow;
        }

        #box {
            width: 500px;
            height: 500px;
            background: turquoise;
        }
    </style>
</head>

<body>
    <div id='drag' draggable="true"></div>
    <div id='box'></div>
    <div id='img_box'></div>
    <img src="" alt="">
    <script>
        // 被拖拽元素
        // ondragstart  开始拖拽
        // ondrag  拖拽中
        // 拖拽中 拖拽结束

        // 目标元素
        // ondragenter 进入目标
        // ondragover 在目标元素移动
        // ondragleave 离开目标元素
        // ondrop 目标元素上释放
        // 配合默认阻止

        // 被拖拽元素
        // drag.ondragstart = function () {
        //     this.innerHTML = '开始拖拽'
        // }
        // //拖拽过程中
        // drag.ondrag = function () {
        //     this.innerHTML = '拖拽中'
        // }
        // drag.ondragend = function () {
        //     this.innerHTML = '拖拽结束'
        // }

        box.addEventListener('dragenter', drag, false)
        box.addEventListener('dragover', drag, false)
        box.addEventListener('dragleave', drag, false)
        box.addEventListener('drop', drag, false)
        function drag(e) {

            e.preventDefault()
            switch (e.type) {
                case 'dragenter':
                    break;
                case 'dragenter':
                    break;
                case 'dragleave':
                    break;
                case 'drop':
                    let aFiles = e.dataTransfer.files;
                    [].forEach.call(aFiles, function (current, index, arr) {
                        let fileRead = new FileReader()
                        fileRead.readAsDataURL(current)
                        fileRead.addEventListener('load', function () {
                            let _div = document.createElement('div')
                            _div.innerHTML = `<img src='${this.result}' width='200px' height='200px' >`
                            img_box.append(_div)
                        })
                    })

                    break;

            }
        }
    </script>

</body>

</html>